<template>
  <div class="tpt" :key="'username_' + dd">
    <div class="myclick">
      <div class="iconfont icon-icon-test6 zj" @click="goFn"></div>
      <div class="jiji">用户注册</div>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[
          { pattern, message: '请输入六位以上数字、字母和符号组成的密码' },
        ]"
      />
      <van-notice-bar
        left-icon="volume-o"
        text="注册过的用户可凭账号密码登录"
      />
      <div style="margin: 16px">
        <van-button
          color=" linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5))"
          round
          block
          type="info"
          native-type="submit"
        >
          注册
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import Vue from 'vue';
import { Form, Field, Button, NoticeBar, Toast } from 'vant';
import axios from 'axios'
Vue.use(NoticeBar);
Vue.use(Form);
Vue.use(Button);
Vue.use(Field);
Vue.use(Toast);
export default {
  data() {
    return {
      username: '',
      name: '',
      password: '',
      pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)(?!([^(0-9a-zA-Z)]|[])+$)([^(0-9a-zA-Z)]|[]|[a-zA-Z]|[0-9]){6,}$/,
      dd: 1,
    };
  },
  methods: {
    onSubmit(values) {
      console.log(111);
      const url = "http://localhost:9090/v1/popo/info"
      axios.post(url, values).then(res => {
        if (res.code === 0) {
          Toast.success('注册成功');
          setTimeout(() => {
            this.$router.push({ name: 'login' })
          }, 800)
        }
        else if (res.code === 1000) {
          Toast.fail('用户未注册或账号、密码有误');
        }
      })
    },
    goFn() {
      this.$router.go(-1)
    }
  },
  created() {
    // console.log('进入注册');
    this.dd = this.dd + 1
    this.username = ''
  },
  //离开
  beforeDestroy() {
    // console.log('离开注册');
    // this.$bus.$emit('hideMenu', true)
    this.dd = this.dd + 1
  },
  mounted() {
    // console.log('注册加载完毕');
    this.$bus.$emit('hideMenu', false)
  },
}
</script>
<style lang="scss" scoped>
.myclick {
  width: 100%;
  height: 51px;
  background: linear-gradient(to left, #d3959b, #bfe6ba);
  border-bottom: 1px solid #fff;
  margin-bottom: 30px;
}
.zj {
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 30px !important;
  color: #fff;
  text-align: center;
  line-height: 30px;
  top: 10px;
  left: 10px;
}
.jiji {
  width: 100%;
  height: 50px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 51px;
  font-weight: bold;
}
</style>
